<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <div class="companyInfoBox">
        <el-row class="itemTitle editIcon"> 申请信息 </el-row>
        <el-row
          class="itemInfo"
          :gutter="20"
          v-if="companyInfo.inputTypeName != '工程项目'"
        >
          <el-col :md="12" :lg="8" :xl="6" class="ellipsis">
            <label>单位类型：</label>
            <span>{{ companyInfo.inputTypeName }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <label>单位名称：</label>
            <span :title="companyInfo.name">{{ companyInfo.name }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <label>统一社会信用代码：</label>
            <span>{{ companyInfo.uscc }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6" class="ellipsis">
            <label>负责人姓名：</label>
            <span>{{ companyInfo.linkman }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <label>负责人手机号：</label>
            <span>{{ companyInfo.tel }}</span>
          </el-col>
        </el-row>
        <el-row class="itemInfo" :gutter="20" v-else>
          <el-col :md="12" :lg="8" :xl="6" class="ellipsis">
            <label>单位类型：</label>
            <span>{{ companyInfo.inputTypeName }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <label>项目名称：</label>
            <span :title="companyInfo.name">{{ companyInfo.name }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <label>建设方：</label>
            <span>{{ companyInfo.pbName }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <label>施工方：</label>
            <span>{{ companyInfo.pcName }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6" class="ellipsis">
            <label>负责人姓名：</label>
            <span>{{ companyInfo.linkman }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <label>负责人手机号：</label>
            <span>{{ companyInfo.tel }}</span>
          </el-col>
        </el-row>
      </div>
      <div class="applyInfoBox">
        <el-row class="itemTitle yellow"> 认证资料 </el-row>
        <el-row class="imgBoxs clearfix">
          <div class="itemBox">
            <div class="imgBox licenseBox">
              <el-image
                style="width: 125.3px; height: 177px"
                :src="bailmentImg"
                :preview-src-list="bailmentList"
              >
              </el-image>
            </div>
            <span>申请接入凭证</span>
          </div>
          <div class="itemBox" v-if="companyInfo.inputTypeName != '工程项目'">
            <div class="imgBox licenseBox">
              <el-image
                style="width: 125.3px; height: 177px"
                :src="licenseImg"
                :preview-src-list="licenseList1"
              >
              </el-image>
            </div>
            <span>营业执照</span>
          </div>
          <div class="itemBox">
            <div class="imgBox idcardBox">
              <el-image
                style="width: 172.4px; height: 107px"
                :src="idcardFront"
                :preview-src-list="idcardList2"
              >
              </el-image>
            </div>
            <span>负责人身份证正面</span>
          </div>
          <div class="itemBox">
            <div class="imgBox idcardBox">
              <el-image
                style="width: 172.4px; height: 107px"
                :src="idcardBack"
                :preview-src-list="idcardList3"
              >
              </el-image>
            </div>
            <span>负责人身份证反面</span>
          </div>
        </el-row>
      </div>
      <el-row class="btnBox">
        <el-button
          size="medium"
          class="submitBtn"
          @click="submitForm()"
          :loading="canSubmit"
          >审核通过</el-button
        >
        <el-button
          size="medium"
          class="cancelBtn rejectFrom"
          @click="rejectFrom()"
          >驳回</el-button
        >
        <el-button size="medium" class="cancelBtn" @click="goBack()"
          >取消</el-button
        >
      </el-row>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="25%"
      :modal-append-to-body="false"
    >
      <el-form
        :model="dialogFormData"
        :rules="dialogFormRules"
        ref="dialogFormData"
        label-width="90px"
        class="demo-formData"
      >
        <el-row>
          <el-form-item
            prop="serverId"
            label="应用名称"
            class="row-padding-bottom"
          >
            <el-select
              v-model="dialogFormData.serverId"
              class="selectWidth"
              clearable
              @change="getSuggest"
            >
              <el-option
                v-for="item in appOptions"
                :key="item.id"
                :label="item.name + '-' + item.version"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="version"
            label="版本号"
            class="row-padding-bottom"
          >
            <el-input v-model="dialogFormData.version" :disabled="true" />
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="btnGroup">
        <el-button @click="cancel" class="cancel">取 消</el-button>
        <el-button
          type="primary"
          class="save"
          @click.native="checkRequset"
          :loading="isSaveLoading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'accountCheckPage',
  data() {
    return {
      titleText: '单位审核页',
      canSubmit: false, //是否可以提交
      id: '', //列表id
      back: true,
      companyInfo: {
        inputTypeName: '',
        inputType: '',
        name: '', //企业名称
        uscc: '', //uscc
        linkman: '',
        tel: '',
        username: '',
        type: '',
        statusName: '',
        status: '',
        pbName: '',
        pcName: '',
        enabled: '',
        enabledName: '',
      },
      bailmentImg: '',
      licenseImg: '',
      idcardFront: '',
      idcardBack: '',
      companyName: '',
      bailmentList: [],
      licenseList1: [],
      idcardList2: [],
      idcardList3: [],
      appOptions: [],
      dialogVisible: false,
      dialogTitle: '请选择该账号使用的应用',
      isSaveLoading: false,
      dialogFormData: {
        serverId: '',
        version: '',
        code: '',
      },
      dialogFormRules: {
        serverId: [
          { required: true, message: '请选择应用名称', trigger: 'change' },
        ],
        version: [
          { required: true, message: '请选择版本号', trigger: 'change' },
        ],
      },
    }
  },
  created() {
    //加载loading
    //this.openFullScreen();
    this.$store.commit(
      'set_active_index',
      '/home/interfacePlatform/accountManageList'
    )
    this.$store.state.activeMenu = '/home/interfacePlatform/accountManageList'
    this.$store.commit('GOBACK_NAME', {
      oldUrl: '/home/interfacePlatform/accountManageList',
      newUrl: this.$router.currentRoute.fullPath,
    })
    this.id = this.$route.query.id
    this.getDetail()
    this.getFiles(this.id)
  },
  computed: {},
  methods: {
    //开启loading
    openFullScreen() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      return loading
    },
    closeFullScreen(loading) {
      loading.close()
    },

    getDetail() {
      this.axios({
        method: 'post',
        url: 'api-m/inputUser/base/v1/detail',
        data: {
          id: this.id,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            let result = res.data.result
            this.companyInfo.inputTypeName = result.inputTypeName
            this.companyInfo.inputType = result.inputType
            this.companyInfo.name = result.name

            this.companyName = result.name

            this.companyInfo.uscc = result.uscc
            this.companyInfo.linkman = result.linkman
            this.companyInfo.tel = result.tel
            this.companyInfo.username = result.username
            this.companyInfo.type = result.type
            this.companyInfo.statusName = result.statusName
            this.companyInfo.status = result.status
            this.companyInfo.pbName = result.pbName
            this.companyInfo.pcName = result.pcName
            this.companyInfo.enabled = result.enabled
            this.companyInfo.enabledName = result.enabledName
          }
        })
        .catch((error) => {})
    },
    getFiles(id) {
      this.axios({
        method: 'post',
        url: 'api-f/files/list',
        data: {
          associatedName: 'T_SYS_INPUT_USER',
          associatedId: id,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            let result = res.data.result
            if (!res.data.hasError) {
              let result = res.data.result
              // this.bailmentImg = result[0].absolutePath;
              // this.bailmentList.push(result[0].absolutePath);
              // this.licenseImg = result[1].absolutePath;
              // this.licenseList1.push(result[1].absolutePath);
              // this.idcardFront = result[2].absolutePath;
              // this.idcardList2.push(result[2].absolutePath);
              // this.idcardBack = result[3].absolutePath;
              // this.idcardList3.push(result[3].absolutePath);
              var first = result.filter(
                (item) => item.fileType === 'ENTRUSTMENT'
              )
              this.bailmentImg = first[0].absolutePath
              this.bailmentList.push(first[0].absolutePath)
              var second = result.filter(
                (item) => item.fileType === 'BUSINESS_LICENSE'
              )
              this.licenseImg = second[0].absolutePath
              this.licenseList1.push(second[0].absolutePath)
              var third = result.filter(
                (item) => item.fileType === 'BOSS_IDCARD_FRONT'
              )
              this.idcardFront = third[0].absolutePath
              this.idcardList2.push(third[0].absolutePath)
              var fourth = result.filter(
                (item) => item.fileType === 'BOSS_IDCARD_BACK'
              )
              this.idcardBack = fourth[0].absolutePath
              this.idcardList3.push(fourth[0].absolutePath)
            }
          }
        })
        .catch((error) => {})
    },
    //审核通过
    submitForm() {
      this.getAppList()
      this.dialogVisible = true
    },
    cancel() {
      this.dialogVisible = false
    },
    //通过请求
    checkRequset() {
      this.$refs.dialogFormData.validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          let vm = this
          vm.axios({
            method: 'post',
            url: 'api-m/inputUser/base/v1/review',
            data: {
              id: vm.id,
              status: 'APPROVED',
              serverId: this.dialogFormData.serverId,
            },
          })
            .then(
              (res) => {
                this.isSaveLoading = false
                if (!res.data.hasError) {
                  // this.$message({
                  //   message: '审核通过',
                  //   type: 'success'
                  // });
                  this.isAdd = false
                  this.dialogVisible = false

                  this.$confirm('账号审核已通过，请及时为该账号添加appid', {
                    confirmButtonText: '前往添加',
                    cancelButtonText: '取消',
                    type: 'warning',
                  })
                    .then(() => {
                      this.$router.push({
                        path: '/home/interfacePlatform/addAppid',
                        name: 'addAppid',
                        query: {
                          companyName: this.companyName,
                        },
                      })
                      this.$store.commit('CHANGE_SLIDER_NAME', {
                        oldUrl: '/home/interfacePlatform/equipmentAppidJs',
                        newUrl: this.$router.currentRoute.fullPath,
                      })
                    })
                    .catch(() => {
                      this.$message({
                        message: '审核通过',
                        type: 'success',
                      })
                      //跳转审核详情页
                      vm.$router.push({
                        name: 'accountCheckDetailPage',
                        path: '/home/interfacePlatform/accountCheckDetailPage',
                        query: {
                          id: vm.id,
                        },
                      })
                      this.$store.commit('CHANGE_SLIDER_NAME', {
                        oldUrl: '/home/interfacePlatform/accountManageList',
                        newUrl: this.$router.currentRoute.fullPath,
                      })
                    })
                } else {
                  this.$message({
                    message: res.data.errorMsg,
                    type: 'error',
                  })
                }
              },
              (res) => {
                this.isSaveLoading = false
                this.$message({
                  message: '审核失败',
                  type: 'error',
                })
              }
            )
            .catch((error) => {})
        } else {
          return false
        }
      })
    },
    //驳回
    rejectFrom() {
      this.$prompt('驳回原因：', '驳回', {
        inputType: 'textarea',
        cancelButtonText: '取消',
        confirmButtonText: '确认驳回',
        inputPlaceholder: '请输入驳回原因，不超过20个字',
        inputPattern: /^.{1,20}$/,
        inputErrorMessage: '需填写驳回原因，不超过20个字符',
      })
        .then(({ value }) => {
          this.rejectRequset(value)
        })
        .catch(() => {
          //取消
        })
    },
    //驳回请求
    rejectRequset(value) {
      let vm = this
      vm.axios({
        method: 'post',
        url: 'api-m/inputUser/base/v1/review',
        data: {
          id: vm.id,
          status: 'REJECTED',
          reason: value,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.$message({
              message: '审核不通过',
              type: 'warning',
            })
            //跳转审核详情页
            vm.$router.push({
              name: 'accountCheckDetailPage',
              path: 'home/interfacePlatform/accountCheckDetailPage',
              query: {
                id: vm.id,
              },
            })
            vm.$store.commit('CHANGE_SLIDER_NAME', {
              oldUrl: '/home/interfacePlatform/accountManageList',
              newUrl: vm.$router.currentRoute.fullPath,
            })
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {})
    },
    //页面返回
    goBack() {
      this.$router.push('/home/interfacePlatform/accountManageList')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/interfacePlatform/accountManageList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getAppList() {
      this.axios({
        method: 'post',
        url: 'api-m/inputServer/base/v1/list',
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.appOptions = response.data.result
          }
        })
        .catch((error) => {})
    },
    getSuggest(value) {
      let obj = {}
      obj = this.appOptions.find(function (item) {
        return item.id === value
      })
      this.dialogFormData.version = obj.version
      // this.axios({
      //   method: "post",
      //   url: "api-m/inputServer/base/v1/suggest",
      //   data:{
      //     name:obj.name
      //   }
      // })
      //   .then(
      //     (response) => {
      //       if (!response.data.hasError) {
      //         let suggest = response.data.result.split('&');
      //         this.dialogFormData.code = suggest[0];
      //         this.dialogFormData.version = suggest[1];
      //       }
      //     }
      //   )
      //   .catch((error) => {});
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .mainCon {
    top: 197px;
    padding: 24px;
    .itemTitle {
      font-size: 18px;
      border-bottom: 1px solid #dee5f4;
      line-height: 50px;
    }
    .companyInfoBox {
      .itemInfo {
        font-size: 14px;
        .el-col {
          margin-top: 18px;
          label {
            width: 126px;
            text-align: right;
            display: inline-block;
            color: #666;
          }
          span {
            color: #151515;
          }
        }
      }
    }
    .applyInfoBox {
      margin-top: 25px;
      .yellow {
        color: #f9a243;
      }
      .imgBoxs {
        padding: 24px;
        text-align: center;
        .itemBox {
          font-size: 14px;
          display: inline-block;
          .imgBox {
            width: 200px;
            height: 200px;
            background: rgba(222, 229, 244, 0.3);
            margin-bottom: 10px;
            span {
              color: #333;
              font-size: 14px;
            }
            // /deep/.el-image__inner--center{
            //     top:0px \9;
            //     left:0px \9;
            // }
          }
          .licenseBox {
            .el-image {
              margin-top: 11.5px;
            }
          }
          .idcardBox {
            .el-image {
              margin-top: 46.5px;
            }
          }
        }
        .itemBox:nth-child(3) {
          margin-right: 0px;
        }
      }
    }
    .btnBox {
      text-align: center;
    }
  }
}

.rejectFrom {
  background: #3e5265;
  color: #fff;
}

.tipCheck {
  background-color: #faffad;
  text-align: center;
  color: #b71617;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.selectWidth {
  width: 100%;
}
</style>
